<script>
import request from "../../../utils/Request.js";
import {ElMessage} from "element-plus";
import store from "../../../store/index.js";
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

export default {
  name: "MarkdownEdit",
  components: {MdEditor},
  props: {
    id: String,
    index: Number
  },
  watch: {
    context() {
      if (!store.state.planeTabIsModified[this.index]) {
        if (!this.firstContent)
          store.state.planeTabIsModified[this.index] = true
        else
          this.firstContent = false
      }
    }
  },
  data() {
    return {
      firstContent: false,
      context: '',//输入的数据
      html: '',
    }
  },
  methods: {
    // 保存的时候的事件
    saveFn(value, html) {
      console.log(this.context)
      if (store.state.planeTabIsModified[this.index])
        request({
          url: '/api/project/markdown/content/save',
          method: 'post',
          data: {
            projectId: this.$route.params.projectId,
            id: this.id,
            content: this.context
          }
        })
            .then(({data}) => {
              if (data.code === 0) {
                ElMessage.success('保存成功')
                store.state.planeTabIsModified[this.index] = false
              } else {
                ElMessage.error(data.msg)
              }
            })

    },
    $imgAdd(files, callback){
      if (files == null || files.length === 0)
         return;
      let file = files[0]
      // 图片文件格式验证
      if (file.type.indexOf('image') === -1) {
        ElMessage.error('请上传图片')
        return
      }
      // 大小 <= 2M
      if (file.size > 2 * 1024 * 1024) {
        ElMessage.error('图片大小不能超过2M')
        return
      }

      let formdata = new FormData();
        formdata.append('image', file)
        request({
          url: '/api/project/doc/upload/image',
          method: 'post',
          data: formdata,
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        .then(({data}) => { 
          // console.log(data)
          if (data.code === 0) {
            callback([{url: data.data.url, alt: file.name, title: file.name}])
          } else {
            console.log(data)
            ElMessage.error(data.msg)
          }
        })
            
    },
  },
  created() {
    request({
      url: '/api/project/markdown/content',
      method: 'post',
      data: {
        projectId: this.$route.params.projectId,
        id: this.id,
      }
    })
        .then(({data}) => {
          if (data.code === 0) {
            this.context = (data.data == null ? '' : data.data)
            if (this.valueHtml !== '')
              this.firstContent = true
          } else {
            ElMessage.error(data.msg)
          }
        })
  }
}
</script>

<template>
  <div style="border: 1px solid #ccc">
    <!-- <mavon-editor
        ref="md"
        style="width: 100%; height: calc(100vh - 180px);overflow-y: hidden; box-shadow: none"
        aria-placeholder="开始编辑..."
        v-model="context"
        :toolbars="toolbars"
        @save="saveFn"
        :html="true"
        :ishljs="true"
        :xssOptions="xssOptions"
        @imgAdd="$imgAdd"
    /> -->

    <MdEditor 
        :editorId="'md-e-md' + id"
         style="width: 100%; height: calc(100vh - 180px);overflow-y: hidden; box-shadow: none"
        placeholder="开始编辑..."
        v-model="context" 
        @onSave="saveFn"
        @onUploadImg="$imgAdd"
        :toolbarsExclude="['github']"
    />
  </div>
  <!-- <br/> -->
  <!-- <el-button style="position: absolute; left: 90%; top: 94%; z-index: 999999999"
             type="primary"
             size="large"
             @click="saveFn(null, null)"
  >
    保存
  </el-button> -->
</template>

<style scoped>

</style>